<template>
	<view class="main">
		<view class="money">
			<text class="fz30">￥</text>
			<text class="num">{{ orderInfo.price }}</text>
		</view>
		<view class="info_ul">
			<view class="info_li typeface">
				<text class="title">会员类型</text>
				<text class="result">{{ orderInfo.name }}</text>
			</view>
			<view class="info_li typeface">
				<text class="title">支付金额</text>
				<text class="result cff9">￥{{ orderInfo.price }}</text>
			</view>
			<view class="info_li typeface">
				<text class="title">创建时间</text>
				<text class="result">{{ orderInfo.create_time }}</text>
			</view>
			<view class="pay_ul">
				<view class="pay_li" v-for="(item, index) in payList" :key="index" @click="changePay(item)">
					<view class="name flex_align">
						<image class="iconfont" :src="item.icon" mode="scaleToFill" />

						<text class="name">{{ item.name }}</text>
					</view>
					<checkbox :checked="chooseId == item.id"></checkbox>
				</view>
			</view>
		</view>
		<view class="btn flex_center_align" @click="confirm">
			确认
		</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/my/vip/payment"></script>

<style lang="scss" scoped>
.main {
	position: relative;
	min-height: 100vh;
	background-color: #fff;
	line-height: 36rpx;

	.money {
		text-align: center;
		padding: 48rpx 37rpx;

		.num {
			font-size: 60rpx;
			font-weight: 600;
		}
	}

	.info_ul {

		.info_li {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			color: #999999;
			padding: 0 65rpx;

			.cff9 {
				color: #FF9C33;
			}

			&.typeface {
				&:before {
					margin: 0 65rpx;
				}
			}
		}

		.pay_ul {
			margin-top: 38rpx;
			font-size: 28prx;

			.pay_li {
				padding: 33rpx 65rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					.iconfont {
						width: 50rpx;
						height: 50rpx;
						font-size: 50rpx;
						margin-right: 12rpx;
					}
				}

				.check {
					color: #999;
					font-size: 36rpx;

					&.iconchoosehandle {
						color: rgb(66, 145, 255);
					}
				}
			}
		}
	}

	.btn {
		font-size: 30rpx;
		width: 630rpx;
		height: 90rpx;
		background: #1C87F3;
		border-radius: 45rpx;
		margin: 100rpx auto 30rpx;
		color: #fff;
	}
}


/deep/.uni-checkbox-input-checked {
	color: #fff !important;
	border-radius: 50%;
	background: rgb(0, 122, 255);
}

/deep/ .uni-checkbox-input {
	margin-right: 0;
	border-radius: 50%;
	width: 36rpx;
	height: 36rpx;
}
</style>
